<!-- 圆角 -->
<template>
    <si-border-radius
        v-model="borderRadius"
        @circle="onBorderCircle"
    />
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { SiBorderRadius } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'RowBorderRadius',
    components: {
        SiBorderRadius
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        const width = computed({
            get: () => parseInt(widget.value.widgetData.eles.style.width),
            set: val => {
                widget.value.widgetData.eles.style.width = `${val}px`
            }
        })
        const height = computed({
            get: () => parseInt(widget.value.widgetData.eles.style.height),
            set: val => {
                widget.value.widgetData.eles.style.height = `${val}px`
                if (!!widget.value.widgetData.eles.style['line-height']) {
                    widget.value.widgetData.eles.style['line-height'] = `${val}px`
                }
            }
        }) 
        const borderRadius = computed({
            get: () => widget.value.widgetData.eles.style['border-radius'],
            set: val => {
                widget.value.widgetData.eles.style['border-radius'] = val
            }
        })

        const onBorderCircle = () => {
            borderRadius.value = '50%'
            if (!width.value && !height.value) {
                width.value = 140
                height.value = 140
            } else if (!width.value) {
                width.value = height.value
            } else if (!height.value) {
                height.value = width.value
            } else {
                if (width.value > height.value) {
                    height.value = width.value
                } else {
                    width.value = height.value
                }
            }
        }

        return {
            widget,
            widgetType,
            borderRadius,
            onBorderCircle
        }
    }
})
</script>